<template>
  <div class="MountainMap">
    <div id="MountainMapContent"></div>
  </div>
</template>

<script>
const chinaJson = require("../../utils/china.json");
import { mountains } from "./mountains.js";

export default {
  name: "MountainMap",
  props: {},
  data() {
    return {
      visited: [
        "华山",
        "黄山",
        "泰山",
        "长白山",
        "武功山",
        "恒山",
        "云台山",
        "三清山",
        "龟峰"
      ]
    };
  },
  methods: {
    initEchart() {
      const mountainsData = mountains;
      this.$echarts.registerMap("china", chinaJson);
      const myChart = this.$echarts.init(
        document.getElementById("MountainMapContent")
      );
      const data = mountainsData.map(item => {
        return {
          name: item.name,
          value: [item.longitude, item.latitude],
          info: item,
          icon: this.visited.includes(item.name) ? "mountain" : "mountain2"
        };
      });

      const option = {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return ` <span style="font-weight: bolder;">${
              params.name
            }</span><br><hr/<br>位置：${params.data.info.province}-${
              params.data.info.city
            }<br>海拔：${
              params.data.info.elevation
            }米<br><hr/>${params.data.info.intro.replace(
              /(.{15})/g,
              "$1<br/>"
            )}`;
          }
        },
        geo: {
          map: "china",
          zoom: 1.5,
          label: {
            show: true,
            color: "#000"
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#ccc",
              borderColor: "#111"
            },
            emphasis: {
              areaColor: "#ddd"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbol: function(_, params) {
              const data = params.data;
              return (
                "image://" +
                require(`../../assets/${data.icon || "mountain2"}.png`)
              );
            },
            symbolSize: 40, // 图标大小
            label: {
              show: true,
              formatter: "{b}",
              position: "right",
              verticalAlign: "middle",
              align: "left"
            }
          }
        ]
      };

      // 使用配置项显示图表
      myChart.setOption(option);
    }
  },
  mounted() {
    this.initEchart();
  }
};
</script>

<style lang="scss" scoped>
.MountainMap {
  #MountainMapContent {
    height: 750px;
    width: 1800px;
    margin: auto;
    background: #bdc9df;
  }
}
</style>
